<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import Editor from '@/components/Editor/index.vue'
import { FormInstance } from '@arco-design/web-vue'
import SelectIcon from './SelectIcon.vue'
import useModal from '@/hooks/useModal'
const props = defineProps<{
  show: boolean
  id: string
  edit?: boolean
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store: iconStore } = useModal()
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  name: '',
  path: '',
  parentName: '',
  parentId: props.id || '',
  source: '',
  code: '',
  alias: '',
  isOpen: 1,
  sort: 0,
  category: 1,
  remark: '',
})

const treeData = ref([])
const getTree = () => {
  get({ url: '/server-shop/sys-seller/seller/menu/tree' }, ({ data }) => {
    treeData.value = data
  })
}
getTree()
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      post(
        { url: '/server-shop/sys-seller/seller/menu/submit', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/sys-seller/seller/menu/detail', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
  })
}

onMounted(() => {
  if (props.id && props.edit) getInfo()
})
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="菜单名称" field="name" :rules="[{ required: true, message: '请输入菜单名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item label="路由地址" field="path" :rules="[{ required: true, message: '请输入路由地址' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.path" placeholder="请输入路由地址" />
        </a-form-item>
        <a-form-item v-if="detail.parentId" :disabled="!!props.id" label="上级菜单">
          <a-tree-select :data="treeData" v-model="detail.parentId" :fieldNames="{ title: 'title', key: 'id' }" placeholder="请选择上级" />
        </a-form-item>

        <a-form-item label="菜单编号" field="code" :rules="[{ required: true, message: '请输入菜单编号' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.code" placeholder="请输入菜单编号" />
        </a-form-item>
        <a-form-item label="类型" field="category" :rules="[{ required: true, message: '请选择类型' }]" :validate-trigger="['change', 'blur']">
          <a-radio-group
            :options="[
              { label: '菜单', value: 1 },
              { label: '按钮', value: 2 },
            ]"
            v-model="detail.category"
            placeholder="请选择类型"
          />
        </a-form-item>
        <template v-if="detail.category == 1">
          <a-form-item label="菜单图标">
            <a-input-group>
              <a-button type="primary" v-if="!detail.source" @click="iconStore.handleShow({})">请选择图标</a-button>
              <a-space v-else>
                <a-button @click="iconStore.handleShow({})">
                  <template #icon>
                    <component :is="detail.source" />
                  </template>
                </a-button>
                <a-button status="danger" type="primary" @click="detail.source = ''">
                  <icon-delete />
                </a-button>
              </a-space>
            </a-input-group>
          </a-form-item>
          <a-form-item label="排序值" field="sort" extra="菜单排序从小到大" :rules="[{ required: true, message: '请输入排序值' }]" :validate-trigger="['change', 'blur']">
            <a-input-number v-model="detail.sort" placeholder="请输入排序值" />
          </a-form-item>
          <a-form-item label="菜单备注">
            <a-textarea v-model="detail.remark" placeholder="请输入菜单备注" />
          </a-form-item>
        </template>
      </a-form>
    </div>
    <SelectIcon v-if="iconStore.show" v-model:show="iconStore.show" @confirm="name => (detail.source = name)" @cancel="iconStore.cancel" />
  </CDrawer>
</template>
<style lang="less" scoped></style>
